<template>
	<view>
		<view class="header-section">
			<view class="header_left">
				<view class="menu-list iconfont icon-locationfill menu-icon">{{city}}</view>
			</view>
			<view class="header_right">
				<view class="menu-list iconfont icon-full menu-icon" />
			</view>
		</view>
		<view class="content-section">
			<view class="content-top">
				<view class="content-top-text">
					<text class='title'>专业维修·安全至上</text>
					<view class='text'>
						<text>电梯便捷生活，安全使用你我共同守护</text>
					</view>

				</view>
				<view>
					<image class="content-top-image" src="@/static/images/index/engineer.png" />
				</view>
			</view>
			<!-- 四个弹框-->
			<view class="content-centre">
				<view class="mine-actions grid col-4 text-center">
					<view class="content-centre-item" @click="handleIndent">
						<view>
							<image style="width: 50px; height: 50px;" src="@/static/images/index/indent.png" />
						</view>
						<text>可报订单</text>
					</view>
					<view class="content-centre-item" @click="handleVerify">
						<view>
							<image style="width: 50px; height: 50px;" src="@/static/images/index/sign_in.png" />
						</view>
						<text>待确认</text>
					</view>
					<view class="content-centre-item" @click="handleTask">
						<view>
							<image style="width: 50px; height: 50px;" src="@/static/images/index/task.png" />
						</view>
						<text>进行任务</text>
					</view>
					<view class="content-centre-item" @click="handleRankingList">
						<view>
							<image style="width: 50px; height: 50px;" src="@/static/images/index/ranking_list.png" />
						</view>
						<text>排行榜</text>
					</view>
<!-- 					<view class="content-centre-item" @click="handleSignIn">
						<view>
							<image style="width: 50px; height: 50px;" src="@/static/images/index/sign_in.png" />
						</view>
						<text>签到</text>
					</view> -->
				</view>
			</view>
			<!-- 消息-->
			<view class="content-message">
				<uni-section class="mb-10" title="消息中心" titleFontSize="16px" titleColor="#000000">
					<template v-slot:right>
						<view class="message-icon" @click="handleMessage">中心</view>
					</template>
					<uni-notice-bar v-if="messages.length > 1" v-for="message in messages" :key="messages.title"
						show-icon scrollable :text="message.text" />
				</uni-section>
			</view>

			<!-- 技术资料-->
			<view class="content-technology">
				<uni-section title="技术资料" titleFontSize="16px" titleColor="#000000">
					<template v-slot:right>
						<view class="technology-icon" @click="handleTechnology">
							更多
							<view class="iconfont icon-right" />
						</view>
					</template>
					<view class="technology-card">
						<view class="card">
							<image style="width: 80px;height: 80px;" src="@/static/images/elevator/OTIS.png"></image>
							<view class="card-bottom" @click="handleTechnologyItem">
								<text>视频通话</text>
							</view>
						</view>
						<view class="card">
							<image style="width: 80px;height: 80px;" src="@/static/images/elevator/KONE.png"/>
							<view class="card-bottom" @click="handleTechnologyItem">
								<text>视频通话</text>
							</view>
						</view>
						<view class="card">
							<image style="width: 80px;height: 80px;" src="@/static/images/elevator/HITACHI.png"/>
							<view class="card-bottom" @click="handleTechnologyItem">
								<text>视频通话</text>
							</view>
						</view>
						<view class="card">
							<image style="width: 80px;height: 80px;" src="@/static/images/elevator/SANLIN.png"/>
							<view class="card-bottom" @click="handleTechnologyItem">
								<text>视频通话</text>
							</view>
						</view>
					</view>
				</uni-section>
			</view>

			<!-- 行业资讯-->
			<view class="content-news">
				<uni-section title="行业资讯" titleFontSize="16px" titleColor="#000000">
					<template v-slot:right>
						<view class="news-icon" @click="handleNews">
							更多
							<view class="iconfont icon-right" />
						</view>
					</template>
					<uni-list>
						<uni-list-chat :title="item.title" v-for="item in news" :key="item.title" :avatar="item.image"
							:time="item.crate_time" clickable @click="handleNewsInfo" />
					</uni-list>
				</uni-section>
			</view>
		</view>
	</view>

</template>
<script>
	export default {
		data() {
			return {
				userId: this.$store.state.user.id,
				city: "",
				messages: [{
					"title": "消息提示",
					"text": "维保提示公告：电梯保养相关事项公告，请各消防立即开展电梯保养业务。"
				}, {
					"title": "消息提示",
					"text": "维保提示公告：电梯保养相关事项公告，请各消防立即开展电梯保养业务2。"
				}],
				news: [{
					"image": '/static/images/news/news_1.png',
					"title": '新时达输送专务部开展了一场电梯安全专项培训',
					"crate_time": "2025年3月13日 10:25"
				}, {
					"image": '/static/images/news/news_2.png',
					"title": '新时达荣膺AS710M新获第23届"新质奖"',
					"crate_time": "2025年3月13日 10:25"
				}, {
					"image": '/static/images/news/news_3.png',
					"title": '智引高速，驱动未来 | 新时达闪耀低碳节能电梯展',
					"crate_time": "2025年3月13日 10:25"
				}]
			}
		},
		created() {
			this.getLocation()
		},
		methods: {
			getLocation() {
				const _this = this;
				uni.getLocation({
					type: 'gcj02',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: function(res) {
						console.log(res)
						_this.city = res.address.city || "未知定位"
					},
					fail: function() {
						_this.city = "未知定位"
						_this.$modal.msg('获取定位失败，请检查定位权限')
					}
				});
			},
			// 可报订单
			handleIndent() {
				console.log("可报订单");
				this.$tab.reLaunch("/pages/indent/index?status=0")
			},
			// 待确认任务
			handleVerify() {
				console.log("待确认任务");
				this.$tab.navigateTo("/pages/mine/polling/index?status=1")
			},
			// 我的任务
			handleTask() {
				console.log("进行任务");
				this.$tab.navigateTo("/pages/mine/polling/index?status=2")
			},
			// 排行榜
			handleRankingList() {
				console.log("排行榜");
				this.$tab.navigateTo("/pages/mine/ranking/index")
			},
			// 签到
			handleSignIn() {
				console.log("签到");
				this.$tab.navigateTo("/pages/indent/sign")
			},
			// 消息中心
			handleMessage() {
				this.$tab.reLaunch("/pages/message/index")
			},
			// 技术资料
			handleTechnology() {
				this.$tab.navigateTo("/pages/mine/technology/index")
			},
			// 视频通话
			handleTechnologyItem() {
				console.log("视频通话");
				this.$modal.showToast('模块建设中~')
			},
			// 行业资讯
			handleNews() {
				this.$tab.navigateTo("/pages/mine/information/index")
			},

			// 行业资讯 详细
			handleNewsInfo() {
				console.log("行业资讯 详细");
				this.$modal.showToast('模块建设中~')
			}
		}
	}
</script>
<style lang="scss" scoped>
	page {
		background-color: #E5E7EB;
		// background-size: cover;
		// box-sizing: border-box;
		width: 100%;
		height: 100%;
	}

	.header-section {
		position: fixed;
		z-index: 9999;
		width: 100%;
		height: 5%;
		background-color: #FFFFFF;
		display: inline-block;
		overflow-y: hidden;
		border-bottom: 1px solid #dedede;


		.header_left {
			position: absolute;
			top: -30%;
			width: 100%;
			background-color: #FFFFFF;
			display: inline-block;

			.menu-icon {
				color: #007AFF;
				font-size: 16px;
				margin-right: 5px;
			}
		}

		.header_right {
			position: absolute;
			top: -30%;
			left: 88%;
			width: 100%;
			color: #007AFF;
			font-size: 16px;
			display: inline-block;
			opacity: 1;
		}
	}

	.content-section {
		padding-top: 10%;
		padding-bottom: 10%;
		position: relative;
		width: 100%;
		overflow-y: scroll;

		.content-top {
			position: relative;
			width: 100%;
			height: 30%;
			padding-top: 10px;
			padding-bottom: 10px;
			display: flex;
			background-color: #FFFFFF;

			.content-top-text {
				/* 自动布局子元素 */
				position: relative;
				margin-left: 20px;
				left: 0px;
				top: 17.5px;
				width: 100%;
				height: 16%;
				opacity: 1;

				background: rgba(0, 0, 0, 0);

				z-index: 0;

				.title {
					font-family: Roboto;
					font-size: 17.5px;
					font-weight: bold;
					line-height: 24.5px;
					letter-spacing: 0px;

					text {
						position: absolute;
						left: 0px;
						top: 0px;
						width: 154px;
						height: 25px;
						opacity: 1;

						font-family: Roboto;
						font-size: 17.5px;
						font-weight: bold;
						line-height: 24.5px;
						letter-spacing: 0px;

						font-feature-settings: "kern" on;
						color: #000000;
					}
				}

				.text {
					position: absolute;
					left: 0px;
					top: 31.5px;
					width: 263px;
					height: 17.5px;
					opacity: 1;

					background: rgba(0, 0, 0, 0);

					text {
						position: absolute;
						left: 0px;
						top: 0px;
						width: 209px;
						height: 18px;
						opacity: 1;

						font-family: Roboto;
						font-size: 12.25px;
						font-weight: normal;
						line-height: 17.5px;
						letter-spacing: 0px;

						font-feature-settings: "kern" on;
						color: #4B5563;
					}

				}
			}

			.content-top-image {
				position: absolutel;
				right: 15%;
				top: 0px;
				width: 84px;
				height: 84px;
				opacity: 1;

				/* 自动布局 */
				display: flex;
				flex-direction: undefined;
				justify-content: undefined;
				align-items: undefined;
				padding: NaNpx;

				background: url("@/static/images/index/engineer.png"), rgba(0, 0, 0, 0);

				z-index: 1;
			}
		}

		.content-centre {
			margin-top: 2%;
			width: 100%;
			height: 30%;

			.content-centre-item {
				width: 22%;
				margin-left: 2.5%;
				padding-top: 1%;
				padding-bottom: 1%;
				display: block;
				background-color: #FFFFFF;
				border-radius: 10px;


				text {
					font-size: 15px;
				}
			}

		}

		.content-message {
			margin-top: 2%;
			border-radius: 10px;

			.message-icon {
				color: #22C55E;
				font-size: 14px;
				margin-right: 5px;
			}

			.mb-10 {
				margin-bottom: 10px;
				font-size: 20px;
			}
		}

		.content-technology {
			position: relative;
			width: 100%;
			margin-top: 2%;
			border-radius: 10px;
			height: 30%;

			.technology-icon {
				color: #9CA3AF;
				font-size: 14px;
				margin-right: 5px;
			}

			.technology-card {
				width: 100%;
				height: 20%;
				// float: left; /* 设置元素浮动 */
				margin-bottom: 2%;
				padding-bottom: 2%;


				.card {
					width: 45%;
					height: 20%;
					margin-left: 3.5%;
					margin-top: 2%;
					padding-bottom: 2%;
					border: 1px #E5E7EB solid;
					display: inline-block;
					border-radius: 7px;


					.card-bottom {
						display: block;
						margin: 0 auto;
						position: relative;
						width: 80%;
						border-radius: 10px;
						background-color: #3B82F6;
						text-align: center;

						text {
							color: #FFFFFF;
						}
					}
				}
			}
		}

		.content-news {
			position: relative;
			width: 100%;
			border-radius: 10px;
			height: 30%;
			padding-bottom: 20px;
			margin-top: 2%;

			.news-icon {
				color: #9CA3AF;
				font-size: 14px;
				margin-right: 5px;
			}
		}
	}
</style>